<template>
	<div class="Newsp-click" >
		<div class="NewspTop" >
			<h3>小众种草</h3>
			<h4>游侠客独一无二的旅行体验</h4>
		</div>
		<div class="swiper NewspBottom-swiper" >
			<ul class="swiper-wrapper" >
				<li v-for="item in newsList" :key="item.id" :style="'background-image:url('+item.src+')'" class="swiper-slide" >
					<p>{{item.name1}}</p>
					<p>{{item.name2}}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		onMounted
	} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	// 3.swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	export default{
		name : 'Newsp',
		data(){
			return {
				newsList : [
					{ id : 1 , src : require('@/assets/img/newpics/1.jpg') , name1 : '银杏特辑' , name2 : '醉美银杏观赏地' },
					{ id : 2 , src : require('@/assets/img/newpics/2.jpg') , name1 : '红叶季' , name2 : '邂逅浪漫红叶' },
					{ id : 3 , src : require('@/assets/img/newpics/3.jpg') , name1 : '向野房车' , name2 : '新型旅行方式' },
					{ id : 4 , src : require('@/assets/img/newpics/4.jpg') , name1 : '徒步赏秋' , name2 : '寻觅撩人秋色' },
					{ id : 5 , src : require('@/assets/img/newpics/5.jpg') , name1 : '游侠人文' , name2 : '诗行江南' },
					{ id : 6 , src : require('@/assets/img/newpics/6.jpg') , name1 : '野奢邦' , name2 : '宿于山海中' },
				]
			}
		},
		setup(){
			onMounted( ()=>{
				new Swiper( '.NewspBottom-swiper' , {
					slidesPerView : 2.95,
					loop:true
					// slidesPerGroup : 3,
		
				} )
			} )
		},
	}
</script>

<style scoped >
	.Newsp-click{
		width: 95%;
		height: 6rem;
		margin: 0 auto;
		/* background-color: #F6D83F; */
		margin-top: 0.5rem;
		margin-bottom: 1rem;
		border-radius: 0.3rem;
	}
	.Newsp-click .NewspTop{
		width: 100%;
		height: 1.86rem;
		background-color: white;
	}
	.Newsp-click .NewspTop h3{
		font-size: 0.5rem;
		line-height: 1.86rem;
		font-weight: bold;
		display: flex;
		float: left;
		/* margin-left: 0.4rem; */
		margin-right: 0.11rem;
	}
	.Newsp-click .NewspTop h4{
		/* width: 36%; */
		padding-left: 0.25rem;
		padding-right: 0.25rem;
		height: 0.8rem;
		font-size: 0.35rem;
		line-height: 0.8rem;
		text-align: center;
		/* margin-left: 0.5rem; */
		margin-top: 0.55rem;
		float: left;
		margin-left: 0.4rem;
		color: #ff9e51;
		background-color: #fff3ea;
		border-radius: 0.2rem;
	}
	.Newsp-click .NewspBottom-swiper{
		width: 100%;
		height: 6rem;
	}
	.Newsp-click .NewspBottom-swiper ul{
		width: 100%;
		height: 70%;
	}
	.Newsp-click .NewspBottom-swiper ul li{
		width: 30%;
		height: 100%;
		background: url(../../../assets/img/newpics/1.jpg);
		background-size: 96% 100%;
		background-repeat: no-repeat;
		float: left;
		border-radius: 0 0 0.2rem 0.2rem;
		position: relative;
	}
	.Newsp-click .NewspBottom-swiper ul li p{
		font-size: 0.4rem;
		text-align: center;
		color: white;
	}
	.Newsp-click .NewspBottom-swiper ul li p:first-child{
		margin-top: 3rem;
		font-weight: bold;
		margin-bottom: 0.2rem;
	}
</style>
